<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul id="box">
    <li>本田</li>
    <li>丰田</li>
    <li>宝马</li>
    <li class="changan">长安</li>
    <li>布加迪威航</li>
    <li>柯尼塞格</li>
    <li>五菱宏光</li>
    <li class="mai">迈腾</li>
    <li class="teng">速腾</li>
  </ul>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    // 像父元素添加-----------------------------------------------
    // 父元素.append(新元素) 像父元素后最后面添加元素
    $("#box").append("<li>q8</li>")
    //新元素.appendTo(父元素) 新元素添加到父元素
    $("<li>劳斯莱斯</li>").appendTo($("#box"))
    // 父元素.prepend(新元素) 像父元素的前面添加新元素
    $("#box").prepend("<li>宾利</li>");
    //新元素.prependTo(父元素)  新元素添加到父元素最前面
    $("<li>保时捷</li>").prependTo($("#box"));
    // 像参照物添加----------------------------------------------
    //元素.after(新元素) 像某个元素后添加新元素
    $(".changan").after("<li>比亚迪</li>");
    //新元素.insertAfter(参照物) 把新元素添加到某个元素后
    $("<li>特斯拉</li>").insertAfter($(".changan"));
    //参照物.before(新元素) 像参照物前添加新元素
    $(".changan").before("<li>奔驰</li>");
    //新元素.insertBefore(参照物) 把新元素添加到参照物前
    $("<li>三蹦子</li>").insertBefore($(".changan"));
    // 父元素.empty()清空某个元素
    // $("#box").empty();
    // 删除元素本身  元素.remove();
    $(".mai").remove();
    // 元素.detach()
    $(".teng").detach();
    // remove和detach的区别  都是删除元素本身，remove删除后 元素所绑定的事件和数据 都会被清除
      // detach 删除元素后 所绑定的事件和数据 都不会被删除
    // 

  </script>
</body>

</html>